<!--
 * @Author: Charlie/刘欣玥
 * @email: 805720393@qq.com
 * @Date: 2022-07-20 15:40:28
-->
<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div>
        <!-- <el-input
          v-model="pagePara.phone"
          clearable
          size="small"
          placeholder="手机号码"
          style="width: 160px"
          class="filter-item"
        /> -->
        <el-select
          v-model="value"
          clearable
          @change="select"
          placeholder="支出"
          class="filter-item"
          style="width: 160px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-date-picker
          @change="getTime"
          v-model="dayTimeArr"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00']"
          placeholder="选择时间范围"
        >
        </el-date-picker>
      </div>
      <!-- <el-button type="primary" icon="el-icon-plus" size="mini">新增</el-button> -->
      <el-button
        type="success"
        icon="el-icon-search"
        size="mini"
        @click="toQuery"
        class="marleft"
        >搜索</el-button
      >
    </div>
    <!--表格渲染-->
    <el-table v-loading="loading" :data="userData" style="width: 100%">
      <el-table-column fixed prop="id" label="ID" />
      <el-table-column ref="table" label="用户头像">
        <template slot-scope="scope">
          <img
            :src="scope.row.userInfo.avatar"
            alt="点击打开"
            class="el-avatar"
          />
        </template>
      </el-table-column>
      <el-table-column prop="userInfo.username" label="用户昵称" />
      <el-table-column prop="userInfo.realName" label="真实姓名" />
      <el-table-column prop="userInfo.phone" label="手机号" />
      <el-table-column prop="userInfo.OpenId" label="微信" />
      <el-table-column label="描述">
        <template slot-scope="scope">
          <p>
            {{ scope.row.source }}
          </p>
        </template>
      </el-table-column>
      <el-table-column label="明细">
        <template slot-scope="scope">
          <p>
            <span>
              {{
                scope.row.quantity === 0
                  ? ""
                  : scope.row.operationType == "MINUS"
                  ? "-"
                  : "+"
              }}</span
            >{{ scope.row.quantity }}
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="操作时间" />
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      style="margin-top: 8px"
      :current-page="pagePara.pageNum"
      layout="total, prev, pager, next, sizes"
      :page-sizes="[10, 20, 50, 100]"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
  </div>
</template>

<script>
import { querySysAccLog, imgurl } from "@/api/yxUser";
import { getdict } from "@/api/system/dictDetail";
export default {
  name: "userIndex",
  components: {},
  data() {
    return {
      dictvalue: [],
      dictlabel: [],
      value: "",
      options: [
        {
          value: "MINUS",
          label: "支出",
        },
        {
          value: "ADD",
          label: "收入",
        },
      ],
      dayTimeArr: "",
      gridData: [],
      loading: false, //加载loading
      userData: [], //会员列表
      pagePara: {
        pageNum: 1,
        pageSize: 10,
        phone: "", //搜索
        endTime: "",
        startTime: "",
        type: "",
      },
      total: 0,
    };
  },
  created() {
    this.gets();
  },
  mounted() {
    this.gets();
  },

  methods: {
    //获取字典详情类型
    gets() {
      this.$nextTick(() => {
        getdict({ dictName: "integral_source" }).then((res) => {
          console.log("字点详情", res);
          // res.some((item, index) => {
          querySysAccLog(this.pagePara).then((resp) => {
            console.log("gets", resp);
            if (resp.status == "1") {
              resp.data.records.forEach((itemimg) => {
                /* if (itemimg.source == item.value) {
                    itemimg.source = item.label;
                  } */
                let flay = res.findIndex((item) => {
                  return item.value == itemimg.source;
                });

                if (flay != -1) {
                  itemimg.source = res[flay].label;
                  console.log(res[flay].label);
                }
                imgurl(itemimg.userInfo.avatar).then((ress) => {
                  itemimg.userInfo.avatar = ress;
                });
              });
              this.userData = resp.data.records;
              this.total = resp.data.total;
              console.log(resp.data.records[0].source);
            }
          });
          // });
        });
      });
    },
    select(el) {
      this.pagePara.type = el;
      console.log("select", el);
      if (el == "ADD") {
        this.pagePara.type = "ADD";
        this.gets();
        console.log(11);
      } else if (el == "MINUS") {
        this.pagePara.type = "MINUS";
        this.gets();
        console.log(22);
      }
    },
    getTime(e) {
      console.log("tiem", e[0]);
      this.pagePara.startTime = e[0];
      this.pagePara.endTime = e[1];
    },

    // updateByIds() {},

    sizeChange(e) {
      console.log("sizeChange", e);
      this.pagePara.pageSize = e;
      this.gets();
    },
    pageChange(e) {
      // 会员列表分页改变时
      console.log("pagenum", e);
      this.pagePara.pageNum = e;
      console.log("pageParapagenum", this.pagePara.pageNum);
      this.gets();
    },
    toQuery() {
      console.log("==", this.pagePara);
      // pagePara: {
      //     pageNum: 1,
      //     pageSize: 10,
      //     phone: "", //搜索
      //     endTime: "",
      //     startTime: "",
      //     type: "",
      //   },
      this.pagePara.endTime = "";
      this.pagePara.startTime = "";
      this.pagePara;
      this.gets();
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  transform: translateX(-100px);
}

.bg-purple-dark {
  background: #6fb6f83c;
  color: rgb(11, 86, 93);
  border: 1px solid rgba(5, 179, 205, 0.433);
  height: 50px;
  line-height: 50px;
  border-radius: 5px;
  padding-left: 20px;
}

.head-container {
  display: flex;
  align-items: center; // 垂直居中

  .marleft {
    margin-left: auto;
    margin-left: 20px;
  }
}
</style>